<template>
  <view>
    <view class="container">
      <view class="head">
        <image class="img" src="@/static/images/bpai.png" alt="" />
        <text class="title">BPai财稅</text>
      </view>
      <view class="content">
        <view v-for="(chat, i) in chats" :key="i">
          <!-- 问题 -->
          <view class="content-item" :class="i != 0 && 'notFirst'" v-if="chat.type == 'send'">
            <view class="content-head">
              <image
                src="@/static/images/zx-question.png"
                class="avatar q-img"
                alt=""
              />
              <text class="username">150****1918</text>
            </view>
            <view class="content-msg">
              <!-- 放置markdown转换后的html -->
              <ua-markdown
                class="message-content"
                :source="chat"
                :fn="contextMsgHandle"
              />
            </view>
          </view>
          <!-- 问题 -->
          <!-- 答案 -->
          <view class="content-item" :class="i != 0 && 'notFirst'" v-else>
            <view class="content-head">
              <image
                src="@/static/images/zx-answer.png"
                class="avatar a-img"
                alt=""
              />
              <text class="username">BPai</text>
            </view>
            <view class="content-msg">
              <!-- 放置markdown转换后的html -->
              <ua-markdown
                class="message-content"
                :source="chat"
                :fn="contextMsgHandle"
              />
            </view>
          </view>
          <!-- 答案 -->
        </view>
      </view>
    </view>
    <view class="foot">
      <image class="foot-bg" src="" alt="" />
      <view class="code-box">
        <image class="code" src="@/static/images/code.png" alt="" />
      </view>
      <view class="text1">扫描二维码 · 问一问 BPai</view>
      <view class="text2">这里是一句广告语</view>
    </view>
  </view>
</template>

<script setup>
onLoad(() => {
  getList();
});
const chats = ref([]);
function getList() {
  wx.request({
    url: `https://bpai-h5-test.biaopu.cloud/api/eimsWebApi/eims/BPai/V2/queryPageMsg`,
    method: "POST",
    header: {
      "Content-Type": "application/json",
      "Client-Type": "wechatPro",
      Authorization:
        "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblVzZXJJZCI6IjE1NzMxMzIxOTQyNzA3MzIyODEiLCJjbGllbnRUeXBlIjoid2VjaGF0UHJvIiwiYXBwSWQiOiJCaWFvUHVZdW4iLCJleHAiOjE3MjQwNTA1MzV9._AKxvDvV_Tz1KgGtPm5Ne4fBmGrJYbde7Ph5Jk1hVOw",
      Deviceid: "bcd9db8b1a68f51eacb06b30acc6b994",
    },
    data: {
      pageNum: 1,
      pageSize: 10,
      endTime: "",
      sessionId: "1831541211159154688",
    },
    success: function (res) {
      let data = res.data;
      console.log("res----", res);
      console.log("data----", data);
      chats.value = data.result.list;
      chats.value = chats.value.map((item) => {
        let recordContent = {};
        if (item.recordContent) {
          recordContent = JSON.parse(item.recordContent);
        }
        return {
          ...recordContent,
          ...item,
          status: "done",
          recommend: [],
          message: recordContent.contextMsg,
          type: recordContent.direction === "Q" ? "send" : "receive",
        };
      });
      console.log("chats.value--", chats.value);
    },
  });
}
function contextMsgHandle(item) {
  // debugger
  console.log("一直触发？");
  let contextMsg = item?.message;
  if (contextMsg) {
    contextMsg = contextMsg.replace(/\\n/g, "\r\n"); // 转化标题
    if (item?.type === "receive" && !["error", "done"].includes(item.status)) {
      contextMsg = contextMsg + '  <span class="cursor-blink"></span>';
      // debugger
    }
    if (item?.type === "receive" && ["error", "done"].includes(item.status)) {
      if (item.extField) {
        let extField = JSON.parse(item.extField);
        if (extField.stopSend == "1") {
          contextMsg =
            contextMsg +
            `<span style="font-size: .12rem; display: inline-block;color: #c0c0c0;background: #f3f4f8;border-radius: .22rem;line-height: .18rem;padding: 0 .08rem;margin-left: .06rem;">用户已停止</span>`;

          // contextMsg = `晚上好！\n\n根据您提供的<Data>内容，没有直接回答“晚上好”的信息。但是，为了遵循您的要求，我可以提供<Data>中出现的通用问候语作为回应：<雷锋日子>/<阳光灿烂的日子>\n\n\"您好，我是BPai财税智能体，由深圳标普云科技有限公司自主研发的AI助手，感谢您与我进行对话。请告诉我有什么问题或需要我的帮助，我会尽力提供帮助。\"\n\n请注意，这个回答是从<Data>中提取的通用问候语，并非直接针对“晚上好”的提问。如果这个回答不符合您的要求，请告知我应该如何处理。<BPai&Recommend>[]`
        }
      }
    }
    // 转义那些非标准的html标签
    contextMsg = escapeNonStandardHtmlTags(contextMsg);
    // console.log("contextMsg", contextMsg);
    return contextMsg;
  } else {
    if (item && item.status == "done") {
      return "GPU繁忙啦，请稍侯再试";
    } else {
      // debugger
      return "正在分析您的问题...";
    }
  }
}
// 将非标准的html标签转义

function escapeNonStandardHtmlTags(text) {
  // 标准HTML标签列表
  const standardTags = [
    "a",
    "div",
    "p",
    "span",
    "img",
    "ul",
    "li",
    "table",
    "tr",
    "td",
    "th",
    "thead",
    "tbody",
    "footer",
    "header",
    "nav",
    "section",
    "article",
    "h1",
    "h2",
    "h3",
    "h4",
    "h5",
    "h6",
    "button",
    "input",
    "form",
    "label",
    "select",
    "option",
    "textarea",
    "strong",
    "em",
    "b",
    "i",
    "u",
    "br",
    "hr",
  ];

  // 正则匹配所有标签
  return text.replace(/<([a-zA-Z][a-zA-Z0-9]*)>/g, function (match, tagName) {
    // 如果不是标准标签，就转义
    if (!standardTags.includes(tagName.toLowerCase())) {
      return "&lt;" + tagName + "&gt;";
    }
    return match; // 如果是标准标签，保留原样
  });
}
</script>
<style lang="scss" scoped>
view {
  box-sizing: border-box;
}
.container {
  width: 638rpx;
  /* height: 3360rpx; */
  background: #f6f8fa;
  border-radius: 16rpx 16rpx 0 0;
  padding: 56rpx 32rpx;
  margin: 0 auto;
}
h1 {
  /* font-size: 200rpx;  */
}
p {
  /* font-size: 100rpx;  */
}
.head {
  margin-bottom: 39rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.head .img {
  width: 40rpx;
  height: 40rpx;
  background: #2a64f6;
  border-radius: 20rpx;
  margin-right: 16rpx;
}

.head .title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 24rpx;
  color: #192236;
  line-height: 16rpx;
  text-align: justify;
  font-style: normal;
}
.content {
  width: 574rpx;
  /* height: 2892rpx; */
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  box-shadow: inset 0rpx -2rpx 0rpx 0rpx #f5f5f5;
  border-radius: 16rpx;
  margin: 0 auto;
  padding: 40rpx 24rpx;
  /* margin-bottom: 32rpx; */
}
.content-item {
  padding-bottom: 24rpx;
  border-bottom: 0.01rem solid #f5f5f5;
  &.notFirst {
    padding-top: 24rpx;
  }
}
.avatar {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}
.content-head {
  display: flex;
  align-items: center;
  margin-bottom: 14rpx;
}
.username {
  font-weight: 400;
  font-size: 28rpx;
  color: #9ca5b5;
  line-height: 28rpx;
}
.content-msg {
  font-weight: 400;
  font-size: 24rpx;
  color: #1d1f24;
  line-height: 44rpx;
}
.foot {
  height: 301rpx;
  background: linear-gradient(180deg, #2a64f6 0%, #2a64f6 100%);
  backdrop-filter: blur(0rem);
  width: 638rpx;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0 0 16rpx 16rpx;
  padding-top: 34rpx;
}
.code-box {
  width: 116rpx;
  height: 116rpx;
  background: #ffffff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 43rpx;
}
.code {
  width: 116rpx;
  height: 116rpx;
}
.text1 {
  font-weight: 600;
  font-size: 24rpx;
  color: #ffffff;
  line-height: 44rpx;
}
.text2 {
  font-weight: 300;
  font-size: 20rpx;
  color: #ffffff;
  line-height: 44rpx;
  letter-spacing: 20rpx;
}
</style>
